<template>
  <div>测试组件</div>
  <hr>
  <button @click="flag=!flag">点击</button>
  <transition name='abc'>
    <div v-if="flag" class="box"></div>
  </transition>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'MyTest',
  setup () {
    const flag = ref(true)
    return { flag }
  }
}
</script>
<style scoped lang='less'>
.box {
  width: 100px;
  height: 100px;
  background: pink;
}
.abc-enter-from,
.abc-leave-to {
  opacity: 1;
  width: 100px;
  height: 100px;
}

.abc-enter-active,
.abc-leave-active {
  transition: all 1s;
}

.abc-enter-to,
.abc-leave-from {
  opacity: 0;
  width: 0;
  height: 0;
}
</style>
